<!--
 * @Author: your name
 * @Date: 2021-08-31 20:28:48
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \新建文件夹 (6)\broker\src\views\tuan\tuan.vue
-->
<template>
  <div class="home">
    <div class="head">
      <p class="qq" @click="dddd">
        <van-icon name="arrow-left" />
      </p>
      <p class="gf">团购</p>
      <p @click="hu" class="ti">添加</p>
    </div>
    <div class="middle">
      <div v-for="(item,idx) in list" :key="idx">
        <img @click="xia(item)" class="tu" :src="`http://47.111.14.227:7001`+item.img" alt />
        <b class="tf">{{item.title}}</b>
        <p class="t">{{item.address}}</p>
        <div class="shu">
          <p>活动时间：{{item.time}}</p>
          <p class="q2">已报名：{{item.peopleNum}}</p>
        </div>
        <div class="below">
          <van-switch v-model="item.state" />
          <div>
            <button class="kai" @click="ka(item)">开团</button>
            <button class="shan" @click="ii(item)">删除</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "../../utils/axios";
export default {
  name: "Home",
  components: {},
  data() {
    return {
      list: [],
      dat: ""
    };
  },
  created() {
    this.ddd();
    this.dat = window.localStorage.getItem("login");
  },
  methods: {
    ddd() {
      axios({
        url: "/group"
      }).then(res => {
        console.log(res);
        this.list = res.data.list;
      });
    },
    //开团
    ka(ite) {
      this.$router.push(`/kai/${ite.id}`);
    },
    //详情
    xia(val) {
      this.$router.push(`/xiang/${val.id}`);
    },
    //删除
    ii(item) {
      console.log(item.id);
      axios
        .delete(`/delGroup/`, {
          data: {
            id: item.id
          }
        })
        .then(res => {
          console.log(res);
          this.ddd();
        });
    },
    //跳转添加页面
    hu() {
      this.$router.push("/chuang");
    },
    dddd(){
      this.$router.push("/Home");
    }
  }
};
</script>
<style lang='css'>
.head {
  height: 50px;
  background-color: rgb(70, 142, 224);
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 9999;
}
.tu {
  width: 95%;
  height: 220px;
  margin-left: 10px;
  margin-top: 15px;
}
.tf {
  margin-left: 10px;
  margin-top: 15px;
}
.t {
  margin-left: 10px;
  margin-top: 15px;
}
.shu {
  margin-left: 10px;
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
}
.q2 {
  margin-right: 10px;
}
.below {
  display: flex;
  justify-content: space-between;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 15px;
  align-items: center;
}
.kai {
  background-color: blue;
  color: #fff;
  border: 1px solid blue;
  height: 30px;
  width: 50px;
}
.shan {
  border: 1px solid #ccc;
  height: 30px;
  width: 50px;
}
.gf {
  background-color: rgb(70, 142, 224);
}
.ti {
  margin-right: 10px;
}
.qq {
  margin-left: 10px;
}
</style>